<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix='sec' uri='http://www.springframework.org/security/tags'%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/boot.js"></script>
<style type="text/css">
	.item{
		width: 95px;
		display: inline-block;
		margin-left: 5px;
	}
</style>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
		<table width="100%" border="0">
			 <tr>
			    <td style="width:30%;">
			      <span class="item">主叫号码：</span>
			      <input id="callerNum" class="mini-textbox" emptyText="请输入主叫号码"  style="width:160px;"/>
			    </td>
			    <td style="width:30%;">
			      <span class="item">被叫号码：</span>
			      <input id="calledNum" class="mini-textbox" emptyText="请输入被叫号码"   style="width:160px;"/>
			    </td>
			    <td style="width:30%;">
			      <span class="item">呼叫开始时间：</span>
			      <input id="startTime" class="mini-datepicker" emptyText="请选择..." style="width:160px;" format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true" allowInput="false" /> 
			    </td>
			    <td style="width:30%;"> </td>
			 </tr>
			 <tr>
			    <td style="width:30%;">
			     <span class="item">呼叫截止时间：</span>
			     <input id="endTime" class="mini-datepicker" emptyText="请选择..." style="width:160px;" format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true" allowInput="false" /> 
			    </td>
			    <td style="width:30%;">
			      <span class="item">通话时长(大于)：</span>
			      <input id="talkTimeMore" class="mini-textbox" emptyText="请输入通话时长(单位：秒)"   style="width:160px;"/> 
			    </td>
			    <td style="width:30%;">
			      <span class="item">通话时长(小于)：</span>
			      <input id="talkTimeLess" class="mini-textbox" emptyText="请输入通话时长(单位：秒)"   style="width:160px;"/> 
			    </td>
			    <td style="white-space:nowrap;"><a class="mini-button" iconCls="icon-search" onclick="search()">查询</a></td>
			 </tr>
		</table>          
	</div>
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
	    <table style="width:100%;">
	        <tr>
	            <td style="width:100%;">
	            	<sec:authorize url='/recording_my_current_export.do'>
	                <a class="mini-button" iconCls="icon-download" onclick="exportCurrentData()">导出当前</a>
	                </sec:authorize>
	                <sec:authorize url='/recording_my_export.do'>
		            <a class="mini-button" iconCls="icon-download" onclick="exportData()">导出全部</a>      
		            </sec:authorize>
	            </td>
	        </tr>
	    </table>           
	</div>
	<div class="mini-fit" >
		<div id="datagrid1" class="mini-datagrid" multiSelect="true" idField="id" pageSize="20" url="recording_my_view.do" style="width:100%;height:100%;">
			<div property="columns">
				<div type="indexcolumn"></div>
				<div type="checkcolumn"></div>
				<div field="callerNum" width="16%" headerAlign="center" align="center">主叫号码</div>
				<div field="calledNum" width="16%" headerAlign="center" align="center">被叫号码</div>
				<div field="seatName" width="13%" headerAlign="center" align="center">坐席</div>
				<div field="callTime" width="20%" headerAlign="center" allowSort="true" dateFormat="yyyy-MM-dd HH:mm:ss" align="center">呼叫时间</div>
				<div width="10%" headerAlign="center" align="center" renderer="onActionRenderer">录音试听</div>
				<div field="talkTime" width="10%" headerAlign="center" align="center">通话时长</div>
				<div field="isOpenText" width="15%" headerAlign="center" align="center">是否公开</div>
			</div>
		</div>
		<!--录音播放器 -->
		<embed id="audio2" src="scripts/wavplayer.swf?gui=mini&h=20&w=300&"
	        bgcolor="#ffffff"
	        width="0"
	        height="0"
	        allowScriptAccess="always"
	        type="application/x-shockwave-flash"
	    />
	</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
grid.load();

function onActionRenderer(e) {
    var s = '<a href="javascript:audition()">试听</a> ';
    return s;
}

function getPlayer(pid) {
	var obj = document.getElementById(pid);
	if (obj.doPlay) return obj;
	for(i=0; i<obj.childNodes.length; i++) {
		var child = obj.childNodes[i];
		if (child.tagName == "EMBED") return child;
	}
}
//播放录音
function doPlay(fname) {
	var player = getPlayer("audio2");
	player.play(fname);
}

function audition() {
	var row = grid.getSelected();
	if(row.recordingFile){
		$.post("get_server_ip.do", function(data) {
			doPlay("http://" + data.serverIp + "/recordingfile/" + row.recordingFile);
		}, "json");
	}else{
		alert("录音文件错误，请重试！");
	}
}

function search() {
	var callerNum = mini.get("callerNum").getFormValue();
	var calledNum = mini.get("calledNum").getFormValue();
	var startTime = mini.get("startTime").getFormValue();
	var endTime = mini.get("endTime").getFormValue();
	var talkTimeLess = mini.get("talkTimeLess").getFormValue();
	var talkTimeMore = mini.get("talkTimeMore").getFormValue();
    grid.load({ 
    	callerNum: callerNum ,
    	calledNum: calledNum ,
    	startTime: startTime ,
    	endTime: endTime ,
    	talkTimeLess: talkTimeLess ,
    	talkTimeMore: talkTimeMore
    });
}


//导出全部
function exportData() {
	var callerNum = mini.get("callerNum").getFormValue();
	var calledNum = mini.get("calledNum").getFormValue();
	var seat = mini.get("seat").getFormValue();
	var startTime = mini.get("startTime").getFormValue();
	var endTime = mini.get("endTime").getFormValue();
	var talkTimeLess = mini.get("talkTimeLess").getFormValue();
	var talkTimeMore = mini.get("talkTimeMore").getFormValue();
	location.href="recording_my_export.do?callerNum="+callerNum+"&calledNum="+calledNum+"&seat="+seat+"&startTime="
	+startTime+"&endTime="+endTime+"&talkTimeLess="+talkTimeLess+"&talkTimeMore="+talkTimeMore;
}

//导出当前页数据
function exportCurrentData() {
	var data =grid.getData();
	var ids = [];
	$.each(data , function(){
        ids.push(this.id);
    });
	 var id = ids.join(',');
	 location.href="recording_my_current_export.do?ids=" +id;
}
</script>
</body>
</html>